<template>
  <div class="mylist">
    <el-tree
      id="el_tree"
      :data="data"
      node-key="id"
      :props="defaultProps"
      :highlight-current="true"
      accordion
      @node-click="handleNodeClick"
    />
  </div>
</template>

<script>
import { getBranchesList } from '@/api/branches/institution'
import { jsonParse } from '@/utils/auth' // 导入反序列化数据的方法
export default {
  name: 'MyList',
  components: {},
  props: {},
  data() {
    return {
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getBranchesList()
  },
  mounted() {},
  methods: {
    async getBranchesList() { // 调用vuex里封装的方法，去获取机构列表并在vuex的方法上写到vuex的state数据里
      this.$store.dispatch('branches/getBranchesList')
      const { data } = await getBranchesList()
      this.data = jsonParse(data.data)
    },
    handleNodeClick(data, node) {
      if (data.id === '123') {
        this.$store.dispatch('branches/getbranches', node.id)
      }
    }
  }
}
</script>
<style lang="scss">
.mylist{
    width: 205px;
    height: 1000px;
    background-color: #fff;
    padding-top: 15px;
    #el_tree .el-tree-node__content{
      height: 40px;
      line-height: 40px;
    }

}
</style>
